<!-- 面试管理 -->
<template>
  <div class="rthcHead">
    <div class="rthcImg">
      <img src="@/assets/img/personnelImage/岗位需求库.png">
      <span class="rthcTi" title="面试管理">面试管理</span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri">
        <el-button type="primary" @click="edaLink">面试安排</el-button>
      </span>
      <span class="rthc-handle-more">
       <el-dropdown>
          <el-icon>
            <setting/>
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="intNotSend">面试通知</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
              <el-dropdown-item>修改</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </span>
    </div>
  </div>
  <div style="height: 100%; min-height: 235px;">
    <div style="background: white">
      <div class="rthcink">
        <span class="rthc-quickearch-label">
          面试负责人:
        </span>
        <div class="rthc-quickearch-style">
            <el-select v-model="search.hr" placeholder="面试官姓名" filterable clearable @change="searchActive">
                <el-option v-for="(item) in hrOptions" :value="item.value" :label="item.label"/>
            </el-select>
        </div>
      </div>
      <div class="rthcink">
        <span class="rthc-quickearch-label">
          面试岗位：
        </span>
        <div class="rthc-quickearch-style">
            <el-select v-model="search.position" placeholder="面试岗位" filterable clearable @change="searchActive">
                <el-option v-for="(item) in positionOptions" :value="item" :label="item"/>
            </el-select>
        </div>
      </div>
      <div class="rthcink">
        <span class="rthc-quickearch-label">
          安排面试日期：
        </span>
        <el-select v-model="search.InterCycle" clearable placeholder="面试区间" @change="searchActive">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
        <el-button type="primary" @click="searchActive">搜索</el-button>
    </div>
    <div class="rthc-list-table">
      <el-table
          ref="multipleTable"
          :data="interviewData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          @selection-change="handleSelectionChange"
          size="small"
      >
          <el-table-column
              prop="resume.id"
              type="selection"
              :selectable='selectableStatus'
              width="55"/>
          <el-table-column prop="resume.name" label="候选人"></el-table-column>
          <el-table-column prop="resume.contactPhone" label="联系方式"></el-table-column>
          <el-table-column prop="position" label="面试岗位"></el-table-column>
          <el-table-column prop="phase" label="面试阶段">
              <template #default="s">
                {{this.$dictMap.getLabel(`interview_phase:${s.row.phase}`)}}
              </template>
          </el-table-column>
          <el-table-column prop="form" label="面试形式">
              <template #default="s">
                {{this.$dictMap.getLabel(`interview_form:${s.row.form}`)}}
              </template>
          </el-table-column>
          <el-table-column prop="interviewDate" label="面试日期"></el-table-column>
          <el-table-column prop="interviewTime" label="面试时间"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="s">
              {{this.$dictMap.getLabel(`interview_status:${s.row.status}`)}}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
<!--          <el-table-column prop="createTime" label="创建时间"></el-table-column>-->
        <el-table-column label="操作"
            show-overflow-tooltip>
          <template #default="s">
              <template v-if="s.row.status === 2">
                  <el-button type="text" size="small" @click="beginInterview(s.row)">开始面试</el-button>
              </template>
              <template v-if="s.row.status === 1">
                  <el-tooltip placement="top" content="发送面试通知" effect="light">
                      <el-button :icon="Bell" type="text" size="small" @click="intNotSend"></el-button>
                  </el-tooltip>
              </template>
              <el-tooltip placement="top" content="查看简历" effect="light">
                  <el-button :icon="View" type="text" size="small"></el-button>
              </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
<!--      <div class="pag-block" style="">-->
<!--          <el-pagination background :total="paging.total" :page-size="paging.pageSize" @current-change="handleCurrentChange"/>-->
<!--      </div>-->
    </div>
      <interview-panel ref="interviewPanel" @refresh-data="init"/>
  </div>
</template>

<script>
import {View,Bell} from '@element-plus/icons-vue'
import {getHrOptions, getInterviewArrangePageInfo, getPositionOptions,sendEmailByReuse} from "../../../network/per/interview_arrange";
import InterviewPanel from "./comps/InterviewPanel.vue";
import DateFormatUtil from "../../../assets/js/personnelJs/DateFormatUtil";
export default {
    name: 'InterviewMain',
    components: {InterviewPanel},
    setup(){
            return{
                View,
                Bell
            }
      },
      data() {
          return {
            options: [
                {
              value: 1,
              label: '近3天'
            }, {
              value: 2,
              label: '近7天'
            }, {
              value: 3,
              label: '本周'
            }, {
              value: 4,
              label: '本月'
            }],
            value: '',
              state: '',
              paging: {
                pageNum: 1,
                pageSize: 10,
                total: null
              },
              interviewData: [],
              hrOptions: [],
              positionOptions: [],
              multipleSelection: [],
              search:{
                  hr: null,
                  position: null,
                  // 面试周期
                  InterCycle:null
              }
          }
      },
      methods: {
        selectableStatus:function (row,index){
          let nowDate = DateFormatUtil.DateUtil.formatDate(new Date());
          if (row.status === 1 && (new Date(nowDate).getTime() - new Date(row.interviewDate).getTime()) == 0){
            return true;
          }else{
            return false;
          }
        },
        intNotSend(row){
          console.log("this.multipleSelection ",)
          if (this.multipleSelection.length <= 0){
            this.$message('请至少选择一位候选人！');
            return
          }
          sendEmailByReuse(this.multipleSelection).then((das)=> {
            if (das.code === 200) {
              this.$notify({
                title: '成功',
                message: '这是一条成功的提示消息',
                type: 'success'
              })
            } else {
              this.$notify({
                title: '失败',
                message: '这是一条失败的提示消息',
                type: 'error'
              })
            }
            this.init();
          })
        },
          beginInterview(row){
              let panel = this.$refs.interviewPanel;
              panel.visible = true;
              panel.interviewArrange = row;
          },
          searchActive(){
              this.loadInterviewArrangeRecord();
          },
        edaLink(){
            this.$router.push({
                path: '/per/interview-arrange'
            })
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
          // this.multipleSelection = [];
          // for (let i = 0; i < val.length; i++) {
          //   this.multipleSelection.push(val[i].id)
          // }
        },
          loadInterviewArrangeRecord(hint){
            getInterviewArrangePageInfo({
                hr: this.search.hr,
                position: this.search.position,
                interCycle : this.search.InterCycle,
                pageNum: this.paging.pageNum,
                pageSize: this.paging.pageSize
            }).then(data=>{
                this.$response.loadPageInfo({
                    data: data,
                    executeFn: ()=>{
                      console.log("11",data.list)
                        this.interviewData = data.list;
                        this.paging.total = data.total;
                    },
                    hint: hint,
                    log: '面试管理记录数据'
                })
            })
          },
          loadHrOptions(){
            getHrOptions().then(data=>{
                this.hrOptions = data.data;
            })
          },
          loadPositionOptions(){
            getPositionOptions().then(data=>{
                this.positionOptions = data.data;
            })
          },
          init(){
            this.loadInterviewArrangeRecord();
            this.loadHrOptions();
            this.loadPositionOptions();
          },
      },
    created() {
        this.init();
    }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/RecruitHeadcount";
</style>
